/* 图片翻页组件整体样式 - 容器 */
.image-flip-container {
  position: relative;
  /* 相对定位（作为子元素绝对定位的参考） */
  width: 100%;
  /* 宽度占满父容器 */
  max-width: 600px;
  /* 最大宽度限制（避免过大） */
  height: 400px;
  /* 固定高度（确保内容区域统一） */
  background-color: #000;
  /* 背景色（图片加载前填充） */
  border-radius: 8px;
  /* 圆角边框 */
  overflow: hidden;
  /* 超出容器内容隐藏（避免图片溢出） */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  /* 投影增强立体感 */
  cursor: pointer;
  /* 鼠标指针变为手型（提示可交互） */
  user-select: none;
  /* 禁止文本选中（提升交互体验） */
}

/* 图片内容区域样式 */
.image-content {
  width: 100%;
  /* 宽度占满容器 */
  height: 100%;
  /* 高度占满容器 */
  object-fit: cover;
  /* 图片覆盖容器（保持宽高比，可能裁剪） */
  display: block;
  /* 块级元素（避免行内元素默认间距） */
  transition: opacity 0.3s ease;
  /* 透明度过渡动画（悬停时生效） */
}

/* 进度条容器样式（显示当前页进度） */
.progress-bar {
  position: absolute;
  /* 绝对定位（固定在容器底部） */
  bottom: 0;
  /* 底部对齐 */
  left: 0;
  /* 左侧对齐 */
  width: 100%;
  /* 宽度占满容器 */
  height: 5px;
  /* 进度条高度 */
  background-color: rgba(255, 255, 255, 0.2);
  /* 背景半透明 */
  overflow: hidden;
  /* 超出部分隐藏（确保进度条不溢出） */
  z-index: 10;
  /* 层级（确保在图片上方） */
}

/* 进度条本身样式（动态宽度表示当前页进度） */
.progress {
  height: 100%;
  /* 高度占满容器 */
  background-color: #007bff;
  /* 进度条颜色（蓝色） */
  transition: width 0.1s ease;
  /* 宽度变化过渡动画（快速响应） */
}

/* 左下角翻页指示器样式（显示当前页/总页数） */
.page-indicator {
  position: absolute;
  /* 绝对定位（固定在容器左下角） */
  bottom: 15px;
  /* 底部边距 */
  left: 15px;
  /* 左侧边距 */
  background-color: rgba(0, 0, 0, 0.6);
  /* 半透明背景 */
  color: #fff;
  /* 文字白色 */
  padding: 8px 12px;
  /* 内边距（增大点击区域） */
  border-radius: 16px;
  /* 圆角边框（柔和外观） */
  font-size: 14px;
  /* 文字大小 */
  font-weight: bold;
  /* 文字加粗 */
  opacity: 0;
  /* 默认隐藏（通过悬停显示） */
  transition: opacity 0.3s ease;
  /* 透明度过渡动画 */
  backdrop-filter: blur(2px);
  /* 背景模糊（毛玻璃效果） */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  /* 投影增强层次感 */
  z-index: 20;
  /* 层级（高于进度条） */
}

/* 鼠标悬停时显示指示器（通过添加.visible类触发） */
.page-indicator.visible {
  opacity: 1;
  /* 完全显示 */
}

/* 右上角设计者信息样式（固定显示品牌信息） */
.designer-indicator {
  position: absolute;
  /* 绝对定位（固定在容器右上角） */
  top: 15px;
  /* 顶部边距 */
  right: 15px;
  /* 右侧边距 */
  background-color: rgba(0, 0, 0, 0.6);
  /* 半透明背景 */
  color: #fff;
  /* 文字白色 */
  padding: 6px 10px;
  /* 内边距 */
  border-radius: 12px;
  /* 圆角边框 */
  font-size: 12px;
  /* 文字较小（避免干扰主内容） */
  font-weight: 500;
  /* 中等字重 */
  backdrop-filter: blur(2px);
  /* 背景模糊效果 */
  z-index: 20;
  /* 层级（与指示器一致） */
}

/* 动画：指示器显示时的缩放效果 */
@keyframes scaleIn {
  from {
    /* 动画起始状态 */
    transform: scale(0.95);
    /* 初始缩放0.95倍 */
    opacity: 0;
    /* 初始透明 */
  }

  to {
    /* 动画结束状态 */
    transform: scale(1);
    /* 恢复原大小 */
    opacity: 1;
    /* 完全显示 */
  }
}

/* 应用缩放动画（当指示器变为visible时触发） */
.page-indicator.visible {
  animation: scaleIn 0.2s ease forwards;
  /* 0.2秒缓动动画，保持最终状态 */
}

/* 图片悬停效果（容器悬停时触发图片透明度变化） */
.image-flip-container:hover .image-content {
  opacity: 0.95;
  /* 图片透明度降低（提示可交互） */
}

/* 无图片状态样式（容器内无图片时显示） */
.empty-state {
  display: flex;
  /* 弹性布局（垂直居中内容） */
  flex-direction: column;
  /* 子元素垂直排列 */
  align-items: center;
  /* 水平居中 */
  justify-content: center;
  /* 垂直居中 */
  height: 100%;
  /* 高度占满容器 */
  color: #ccc;
  /* 文字灰色 */
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  /* 渐变背景 */
}

/* 无图片状态图标（相机符号） */
.empty-icon {
  font-size: 64px;
  /* 图标大尺寸（突出显示） */
  margin-bottom: 16px;
  /* 底部边距（分隔图标和文字） */
}

/* 无图片状态提示文字 */
.empty-text {
  font-size: 18px;
  /* 文字较大（清晰提示） */
  font-weight: 500;
  /* 中等字重 */
}

/* 加载状态覆盖层样式（图片加载时显示） */
.loading-overlay {
  position: absolute;
  /* 绝对定位（覆盖整个容器） */
  top: 0;
  /* 顶部对齐 */
  left: 0;
  /* 左侧对齐 */
  width: 100%;
  /* 宽度占满 */
  height: 100%;
  /* 高度占满 */
  background-color: rgba(0, 0, 0, 0.7);
  /* 半透明遮罩 */
  display: flex;
  /* 弹性布局（居中加载内容） */
  flex-direction: column;
  /* 子元素垂直排列 */
  align-items: center;
  /* 水平居中 */
  justify-content: center;
  /* 垂直居中 */
  z-index: 30;
  /* 最高层级（覆盖所有内容） */
}

/* 加载旋转图标 */
.loading-spinner {
  width: 50px;
  /* 图标宽度 */
  height: 50px;
  /* 图标高度 */
  border: 5px solid rgba(255, 255, 255, 0.3);
  /* 灰色边框 */
  border-radius: 50%;
  /* 圆形 */
  border-top-color: #007bff;
  /* 顶部边框蓝色（旋转时突出） */
  animation: spin 1s linear infinite;
  /* 1秒线性旋转动画（无限循环） */
}

/* 旋转动画关键帧 */
@keyframes spin {
  to {
    /* 动画结束状态 */
    transform: rotate(360deg);
    /* 旋转360度 */
  }
}

/* 加载提示文字 */
.loading-text {
  color: white;
  /* 文字白色 */
  margin-top: 15px;
  /* 顶部边距（分隔图标和文字） */
  font-size: 16px;
  /* 文字大小 */
}